import React, { Component } from 'react'
import { connect } from 'dva'

import { Layout, Menu, Icon } from 'antd'
import styles from './Header.less'

class Header extends Component {
  handleClickMenu() {

  }
  switchSider() {
    const { dispatch } = this.props
    dispatch({ type: 'app/switchSider' })
  }
  render() {
    return (
      <Layout.Header className={styles.header}>
        <div className={styles.button} onClick={this.switchSider.bind(this)}>
          <Icon type={'menu-unfold'} />
        </div>
        <div className={styles.rightWarpper}>
          <div className={styles.button}>
            <Icon type="mail" />
          </div>
          <Menu
            mode="horizontal"
            onClick={this.handleClickMenu}
            className={styles.submenu}
          >
            <Menu.SubMenu
              title={<span><Icon type="user"/>user</span>}
            >
              <Menu.Item key="logout">
                Sign out
              </Menu.Item>
            </Menu.SubMenu>
          </Menu>
        </div>
      </Layout.Header>
    )
  }
}
const mapState = ({ app }) => {
  return { app }
}

export default connect(mapState)(Header)
